<template>
  <div class="merchant-container">
    <!-- 评价上边 -->
          <!-- <h1 @click="changeName1()">{{changeName}}</h1> -->
    <div class="merchant-container-top">
      <div class="merchant-container-top-top">
        <div class="merchant-info-left">
          <h2>{{ merchantInfo.name }}</h2>
          <p>
            <span><van-rate v-model="merchantInfo.score" readonly /></span>
            <span class="sales">661</span> 月售<span>{{
              merchantInfo.sellCount
            }}</span
            >单
          </p>
        </div>
        <div class="merchant-info-right">
          <p><van-icon name="like-o" class="like-o" /></p>
          <p>已收藏</p>
        </div>
      </div>
      <div class="merchant-container-top-botton">
        <div>
          <p>起送价</p>
          <p>
            <span class="merchant-distribution-info">{{
              merchantInfo.minPrice
            }}</span>
            元
          </p>
        </div>
        <div>
          <p>商家配送</p>
          <p>
            <span class="merchant-distribution-info"
              >{{ merchantInfo.deliveryPrice }}
            </span>
            元
          </p>
        </div>
        <div>
          <p>平均配送时间</p>
          <p>
            <span class="merchant-distribution-info">{{
              merchantInfo.deliveryTime
            }}</span>
            分钟
          </p>
        </div>
      </div>
    </div>
    <!-- 评价下边 -->
    <div class="merchant-container-botton">
      <h2>活动与公告</h2>
      <!-- 公告 -->
      <div class="merchant-bulletin">{{ merchantInfo.bulletin }}</div>
      <!-- 活动 -->
      <div class="merchant-activity">
        <p class="activity-container" v-for="item in supports" :key="item">
          <img src="../../assets/imgs/img/icon2.png" alt="" />
          <span>{{ item }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_shopSeller } from "../../api/info";

//商家的对象约束
interface ISeller {
  avatar?: string; //头像
  bulletin?: string; //公告
  date?: Array<string>; //营业时间
  deliveryPrice?: number; //配送费
  deliveryTime?: number; //配送时间
  description?: string; //配送描述
  id?: number; //id
  minPrice?: number; //起送费
  name?: string; //商店名
  pics?: Array<string>; //图片组
  score?: number; //评分
  sellCount?: number; //销量
  //   supports?: Array<string>; //活动
}

@Component
export default class Merchant extends Vue {
  value: number = 3; //星星
  merchantInfo: ISeller = {}; //商家信息
  supports: any = [""];

//随意写的改变名字
get changeName(){
  return this.$store.state.name
}
changeName1(){
  this.$store.commit('changeName','张卓商家')
}
  //获取商家信息
  getMerchant(): void {
    $_shopSeller().then((res) => {
      //   console.log(res.data);
      this.merchantInfo = res.data;
      console.log(this.merchantInfo);
      this.supports = res.data.supports;
      console.log(this.supports);
    });
  }

  created(): void {
    this.getMerchant();
  }
}
</script>

<style lang="scss" scoped>
.merchant-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(244, 245, 247);
  .merchant-container-top {
    width: 100%;
    height: 150px;
    background-color: #fff;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    padding: 5px 18px;
    .merchant-container-top-top {
      flex: 1;
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
      display: flex;
      .merchant-info-left {
        flex: 1;
        color: rgb(143, 143, 143);
        h2 {
          color: rgb(4, 4, 4);
          font-weight: normal;
          font-size: 18px;
          margin-bottom: 10px;
        }
        .sales {
          margin: 0 10px;
        }
      }
      .merchant-info-right {
        width: 80px;
        text-align: right;
        color: rgb(143, 143, 143);
        align-self: center;
        p {
          margin: 2px;
        }
        .like-o {
          font-size: 20px;
        }
      }
    }
    .merchant-container-top-botton {
      flex: 1;
      padding: 10px 0;
      display: flex;
      justify-content: space-evenly;
      color: rgb(143, 143, 143);
      p {
        margin: 5px 0;
      }
      .merchant-distribution-info {
        color: #000;
        font-size: 20px;
      }
    }
  }
   .merchant-container-botton::-webkit-scrollbar{
      display: none;
    }
  .merchant-container-botton {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background-color: #fff;
    padding: 0 14px;
    padding-bottom: 14px;
   
    h2 {
      margin: 10px 0;
      font-weight: normal;
      font-size: 20px;
      padding: 5px 0;
    }
    .merchant-bulletin {
      color: rgb(230, 95, 60);
      border-bottom: 1px solid #ccc;
      padding-bottom: 16px;
      line-height: 20px;
    }
    .merchant-activity {
      color: #000;
      padding-top: 16px;
      padding-bottom: 80px;
      text-align: left;
      .activity-container {
        margin: 5px;
        img {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>